<template>
  <mu-flex id="more-news-root" direction="column">
    <mu-appbar id="appBar" :z-depth="2" color="primary" title="更多资讯"></mu-appbar>

    <div id="content">
      <mu-load-more
              :refreshing="isRefreshing"
              @refresh="onRefresh"
              :loading="isLoading"
              @load="onLoad"
              :loaded-all="isLoadedAll">
        <mu-list @change="onItemClick">
          <template v-for="(value, index) in news">
            <mu-list-item
                    class="mu-list-item"
                    button
                    :ripple="true"
                    :key="index"
                    :value="{article: value}">
              <mu-flex class="item-content" align-items="center">
                <mu-flex class="item-content-text" direction="column" fill>
                  <mu-list-item-title class="item-title">{{ value.title }}</mu-list-item-title>
                  <p class="item-desc">{{ value.description }}</p>
                  <div class="item-author" v-show="value.author.length > 0">{{ value.author }}</div>
                </mu-flex>
                <img :src="value.image != null && value.image !== '' && value.image !== 'null' ? value.image : defaultImage"/>
              </mu-flex>
            </mu-list-item>
            <mu-divider class="mu-divider"/>
          </template>
        </mu-list>
      </mu-load-more>
    </div>

  </mu-flex>
</template>

<script lang="ts">
  import NewsService from '../../../phr/service/knowledge/HealthKnowledgeService';
  import {SUCCESS} from '../../common/ErrorCode';

  let constant = {
    network_error: '网络异常'
  };

  export default {
    data() {
      return {
        defaultImage: require('@/assets/img/default-image.jpg'),
        isRefreshing: false,
        isLoadedAll: false,
        isLoading: false,
        news: [],
        page: 0,
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.onRefresh();
      });
    },
    methods: {
      onItemClick(value) {
        this.$router.push({
          name: 'NewsDetail',
          params: {article: value.article}
        });
      },
      onRefresh() {
        this.isRefreshing = true;

        NewsService.getNewestArticle(++this.page)
            .then(res => {
              if (res.code === SUCCESS) {
                this.news = res.value.value;

                if (res.value.currentPage >= res.value.maxPage) {
                  // 当前获取的是最后一页的数据，停止加载更多的功能
                  this.isLoadedAll = true;
                }
              } else {
                this.$toast.info(res.message);
              }

              this.isRefreshing = false;
            })
            .catch(e => {
              console.log(e);
              this.$toast.info(constant.network_error);
            })
      },
      onLoad() {
        this.isLoading = true;

        NewsService.getNewestArticle(++this.page)
            .then(res => {
              if (res.code === SUCCESS) {
                res.value.value.forEach(it => {
                  this.news.push(it);
                });

                if (res.value.currentPage >= res.value.maxPage) {
                  // 当前获取的是最后一页的数据，停止加载更多的功能
                  this.isLoadedAll = true;
                }
              } else {
                this.$toast.info(res.message);
              }

              this.isLoading = false;
            })
            .catch(e => {
              console.log(e);
              this.$toast.info(constant.network_error);
            })
      }
    },
  }
</script>

<style scoped>
  #more-news-root {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  #appBar {
    width: 100%;
  }

  #content {
    overflow: auto;
    flex: 1 1 0 !important;
    width: 100%;
  }

  .item-content {
    padding: 8px 0;
    width: 100%;
  }

  .item-content-text {
    overflow: hidden;
  }

  .item-content img {
    width: 100px;
    height: 80px;
    margin-left: 8px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .item-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
  }

  .item-desc {
    font-size: 14px;
    line-height: 1.5;
    padding: 0;
    color: #616161;
    font-weight: 400;
    margin: 0;
    box-sizing: border-box;
    height: 42px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .item-author {
    margin-top: 8px;
    line-height: 1.5;
    font-size: 12px;
    color: #616161;
  }
</style>